<template>
	<el-card>
		<el-row>
			<el-col :span="11">
				 
				<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
				<i v-else class="el-icon-video-camera-solid avatar-uploader-icon"></i>
			 
			</el-col>
			<el-col :span="2" style="min-height: 1px;"></el-col>
			<el-col :span="11">
				<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
				<i v-else class="el-icon-video-camera-solid avatar-uploader-icon"></i>
			</el-col>

		</el-row>
		
		<el-row style="margin-top:10px;">
			<el-button type="success" @click="openCam">打开摄像头</el-button>
			<el-button type="warning" @click="closeCam">关闭摄像头</el-button>
		</el-row> 
		
		
		 <el-table :data="tableData" style="width: 100%;" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" >
		 	<el-table-column prop="face" label="脸部坐标" min-width="20%">
		 	</el-table-column>
		 	<el-table-column prop="eye" label="眼睛坐标" min-width="30%">
		 	</el-table-column>
		 	<el-table-column prop="smile" label="嘴巴坐标" min-width="30%">
		 	</el-table-column>
		 	<el-table-column prop="faceimg" label="脸部" min-width="20%">
		 		<template slot-scope="scope">
		 			<img :src="baseStaticURL+scope.row.faceimg" min-width="70" height="70" />
		 		</template>
		 	</el-table-column>
		 </el-table>
        
		
	</el-card>
</template>


<script>
	export default {
		data() {
			return {
				imageUrl1: '',
				imageUrl2: '',
				file: null,
				tableData: []
			};
		},
		methods: {
			openCam() {
				 this.imageUrl1="http://127.0.0.1:8000/app/v21"
				 this.imageUrl2="http://127.0.0.1:8000/app/v22"
			},
			closeCam(){
				this.imageUrl1=""
				this.imageUrl2=""
			}
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 100px;
		color: #8c939d;
		width:100%;
		line-height: 500px;
		text-align: center;
	}

	.avatar {
		width: 100%;
		height: 500px;
		display: block;
	}
</style>
